<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta th:replace="header::systemCss" />
<link th:href="@{/css/master.css?v=0.0.1}" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" data-options="fit:true">

	<div id="p" data-options="region:'west'" title="West" style="width:25%;padding:10px">
		<ul class="easyui-tree">
			<li th:each="menu:${menus}">
				<span th:text="${menu.name}">菜单</span>
				<ul>
					<li th:each="menuc:${menu.menus}" >
						<a href="javaScript:;" th:text="${menuc.name}" th:id="${menuc.id}"
						   th:data-url="${menuc.url}" th:title="${menuc.name}"
						   onclick="gettabs(this.id,this.title,this.getAttribute('data-url'))"></a>
					</li>
				</ul>
			</li>
		</ul>
	</div>


	<div data-options="region:'center'">
		<div id="tt" class="easyui-tabs" data-options="fit:true">

		</div>
	</div>

</div>
	<div th:replace="footer::systemJs"></div>
	<script th:inline="javascript">
<!--	添加选项卡-->
	function gettabs(id,title,url){
		console.log(id,url)
		if (!$('#tt').tabs('exists',title)){
			$('#tt').tabs('add',{
				title:title,
				content: '<iframe style="width: 100%;height: 100%;" src="'+url+'"></iframe>',
				closable: true
			})
		}else{
			$('#tt').tabs('select',title)
		}
	}
// $('#tt').tabs('add',{
// 	title:'New Tab',
// 	content:'Tab Body',
// 	closable:true,
// 	tools:[{
// 		iconCls:'icon-mini-refresh',
// 		handler:function(){
// 			alert('refresh');
// 		}
// 	}]
// });
	</script>
</body>
</html>